<template>
	<table class="tabs" border="1" cellpadding="0" cellspacing="0">
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>身份</th>
		</tr>
		<tr v-for="(item,index) in list" :key="item.id">
			<td>{{item.id}}</td>
			<td>{{item.uname}}</td>
			<td>{{filterGn(item.gender)}}</td>
			<td>{{filterPost(item.post)}}</td>
		</tr>
	</table>
</template>

<script>
	//导出
export default{
	name:'MyList',
	props:['msg'],
	data(){
		return{
			list:[]
		}
	},
	watch:{
		msg(){
			let index = this.list.length+1;
			this.msg.id = index;
			this.list.push(this.msg);
		}
	},
	computed:{
		filterGn(){
			//返回一个箭头函数
			return (x)=>{
				return x===1?'男' : x===0 ? '女' : '';
			}
		},
		filterPost(){
			//返回一个箭头函数
			return (x)=>{
				return x===1?'组长' : x===2 ? '组员' : '';
			}
		}
	}
}
</script>

<style scoped>
	.tabs{
		border: 3px dotted gainsboro;
		margin-top: 10px;
		width: 100%;
		color: #00936C;
		font-size: 14px;
		
	}
	.tabs tr{
		text-align: center;
		border: 3px dotted gainsboro;
		line-height: 35px;
	}
</style>
